<template>
<!-- 	<div>
		一个demo带的页面,由于大小不好控制,已经被自己重新定义的one_cart_item组件替换了.
	</div> -->
	<van-swipe-cell :before-close="beforeClose">

		<van-card num="2" price="2.00" desc="描述信息" title="商品标题"
			thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
			<template #tags>
				<van-tag plain type="primary">标签</van-tag>
				<van-tag plain type="primary">标签</van-tag>
			</template>
			<template #footer>
				<div class="button_group">
					<van-button size="normal">
						<p>-</p>
					</van-button>
					<van-field v-model="value" placeholder="1" :style="{ width: '40px' }" />
					<van-button size="normal">
						<p>+</p>
					</van-button>
				</div>
			</template>
		</van-card>

		<template #right>
			<van-button square text="删除1111" type="danger" class="delete_button" />
		</template>
	</van-swipe-cell>
</template>


<script>
	import {
		showConfirmDialog,
		SwipeCell,
	} from 'vant';

	export default {
		data() {
			return {
				// imageNames:[require("../assets/draws1.png"),]
				// imageNames:{
				// 	"k1":"../assets/draws1.png",
				// 	"k2":"../assets/draws1.png",
				// },
				imageName: 'draws1.png',
			}
		},
		props: {
			recvImgName: String,
		},
		computed: {
			imageSource() {
				// 使用 require 函数生成动态路径
				// return require(`../assets/draws1.png`);
				//return require('@/assets/' + this.imageName);
				//return require(`../assets/${this.imageName}`);
				return require('@/assets/' + this.recvImgName);;
			},
		},
		setup() {
			// position 为关闭时点击的位置
			const beforeClose = ({
				position
			}) => {
				switch (position) {
					case 'left':
					case 'cell':
					case 'outside':
						return true;
					case 'right':
						return new Promise((resolve) => {
							showConfirmDialog({
									title: '确定删除吗？',
								})
								.then(() => resolve(true))
								.catch(() => resolve(false));
						});
				}
			};

			return {
				beforeClose
			};
		},
	}
</script>

<style scoped>
	/* .container {
		text-align: center;
		margin: 1rem;
		/* 调整每个 div 之间的间距 */
	/* 	width: 42rem;
		height: 2rem;
		background-color: #FFFFFF; */
	/* } */
 

	/* .goods-card {
		margin: 0;
		background-color: @white;
	} */

	.delete_button {
		height: 100%;
	}

	.button_group {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: flex-end;
		/* 靠右显示 */
	}

	/* .van-button--primary {
	  color: var(--van-button-primary-color);
	  background-color: var(--van-button-primary-background);
	} */
</style>